{% extends 'base.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
          media="screen and (min-width: 1300px)">
    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
          media="screen and (max-width: 1300px)">
    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
          media="screen and (max-width: 750px)">
{% endblock %}

{% block nav %}
    <nav class='set-nav'>
        <ul>
            <li>
                <a href="{{ path('settings_profile') }}"
                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
            </li>
            <li>
                <a href="{{ path('account_email') }}"
                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
            </li>
            <li>
                <a href="{{ path('doc_tags') }}"
                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
            </li>
        </ul>
    </nav>

    <nav class='set-nav2'>
        <ul>
            <li>
                <a href="{{ path('account_email') }}"
                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
            </li>
            <li>
                <a href="{{ path('account_pass') }}"
                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
            </li>
            <li>
                <a href="{{ path('account_bak') }}"
                   class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup
                    and Restore</a>
            </li>
        </ul>
    </nav>
{% endblock %}

{% block body %}
    <div class="content">
        {{ form(form) }}
    </div>
{% endblock %}